<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>五子棋</title>
    <script src="/jquery/jquery-1.7.2.min.js"></script>

    <style>
        body{ text-align:center}
        table{
            width: 1200px;
            height: 600px;
            margin:0 auto;
            border: 0.5px solid #d6d6d6;
        }
        tr{width: 100%}
        td{
            text-align: center;
            cursor: pointer;
            border: 0.5px solid #d6d6d6;
            width: 45px;
            height: 45px;
            padding: 0px;
            margin: 0px;
        }
        td img{
            width: 25px;
            height: 25px;

        }
        td img.left_top{
            -webkit-transform:scale(1) rotate(270deg);
            -moz-transform:scale(1) rotate(270deg);
            -o-transform:scale(1) rotate(270deg);

        }
        td img.right_top{
            -webkit-transform:scale(1) rotate(0deg);
            -moz-transform:scale(1) rotate(0deg);
            -o-transform:scale(1) rotate(0deg);

        }
        td img.left_bottom{
            -webkit-transform:scale(1) rotate(180deg);
            -moz-transform:scale(1) rotate(180deg);
            -o-transform:scale(1) rotate(180deg);
            margin-bottom: -4px;

        }
        td img.right_bottom{
            -webkit-transform:scale(1) rotate(90deg);
            -moz-transform:scale(1) rotate(90deg);
            -o-transform:scale(1) rotate(90deg);
            margin-bottom: -4px;

        }
    </style>
</head>
<body>
    <table  cellspacing="0" border="0">

    </table>
</body>
<script>
    /*<![CDATA[*/

        function Game() {
            this.x=22;
            this.y=10;
            this.color='red';
        }
        Game.prototype.select=function (y,x,name) {
            var self=this;
            //每次选中，需要同时修改四个图片
            var xy_1,xy_2,xy_3,xy_4;
            var img_1,img_2,img_3,img_4;
            if(name=='right_bottom'){
                xy_1=parseInt(x)+''+parseInt(y);
                xy_2=parseInt(x+1)+''+parseInt(y);
                xy_3=parseInt(x)+''+parseInt(y+1);
                xy_4=parseInt(x+1)+''+parseInt(y+1);
            }else if(name=='left_bottom'){
                xy_1=parseInt(x-1)+''+parseInt(y);
                xy_2=parseInt(x)+''+parseInt(y);
                xy_3=parseInt(x-1)+''+parseInt(y+1);
                xy_4=parseInt(x)+''+parseInt(y+1);
            }else if(name=='right_top'){
                xy_1=parseInt(x)+''+parseInt(y-1);
                xy_2=parseInt(x+1)+''+parseInt(y-1);
                xy_3=parseInt(x)+''+parseInt(y);
                xy_4=parseInt(x+1)+''+parseInt(y);
            }else if(name=='left_top'){
                xy_1=parseInt(x-1)+''+parseInt(y-1);
                xy_2=parseInt(x)+''+parseInt(y-1);
                xy_3=parseInt(x-1)+''+parseInt(y);
                xy_4=parseInt(x)+''+parseInt(y);

            }else{
                alert('无法识别的位置');
            }
            img_1=$('img[usemap="#right_bottom_'+xy_1+'"]');
            img_2=$('img[usemap="#left_bottom_'+xy_2+'"]');
            img_3=$('img[usemap="#right_top_'+xy_3+'"]');
            img_4=$('img[usemap="#left_top_'+xy_4+'"]');
            var src_='/images/41_'+self.color+'.png'
            if(self.color=='red'){
                self.color='black';
            }else{
                self.color='red';
            }
            img_1.attr('src',src_);
            img_2.attr('src',src_);
            img_3.attr('src',src_);
            img_4.attr('src',src_);
        }
        Game.prototype.init=function () {
            var self=this;
            var data_=new Array();
            var trs=new Array();
            for(var i=0;i<self.y;i++){
                trs.push("<tr>")
                for(var j=0;j<self.x;j++){
                    var xy=j+''+i;
                    data_.push([xy,'grey']);
                    trs.push('<td>' +
                        '<img x="'+j+'" y="'+i+'" class="left_top" usemap="#left_top_'+xy+'" src="/images/41_grey.png">' +
                            '<map name="left_top_'+xy+'" id="left_top_'+xy+'">' +
                                '<area shape="circ" coords="25,0,20" onclick="game_.select('+i+','+j+',\'left_top\')" />' +
                            '</map>' +
                        '<img x="'+j+'" y="'+i+'" class="right_top" usemap="#right_top_'+xy+'" src="/images/41_grey.png">' +
                            '<map name="right_top_'+xy+'" id="right_top_'+xy+'">' +
                                '<area shape="circ" coords="25,0,20" onclick="game_.select('+i+','+j+',\'right_top\')" />' +
                            '</map>' +
                        '<img x="'+j+'" y="'+i+'" class="left_bottom" usemap="#left_bottom_'+xy+'" src="/images/41_grey.png">' +
                            '<map name="left_bottom_'+xy+'" id="left_bottom_'+xy+'">' +
                                '<area shape="circ" coords="25,0,20" onclick="game_.select('+i+','+j+',\'left_bottom\')" />' +
                            '</map>' +
                        '<img x="'+j+'" y="'+i+'" class="right_bottom" usemap="#right_bottom_'+xy+'" src="/images/41_grey.png">' +
                            '<map name="right_bottom_'+xy+'" id="right_bottom_'+xy+'">' +
                                '<area shape="circ" coords="25,0,20" onclick="game_.select('+i+','+j+',\'right_bottom\')" />' +
                            '</map>' +
                        '</td>');
                }
                trs.push("</tr>")
            }
            $("table").html(trs.join(""));
        }

        var game_;
        $(function () {
            game_=game_||new Game();
            game_.init();
        });
    /*]]>*/
</script>
</html>